<template>
	<view class="volunteer flex--col">
		<VolunteerStatus
		 :requestCount="requestCount"
		 :status="serviceStatus"
		 @changeServiceStatus="handleChangeStatus"></VolunteerStatus>
		
		<view class="request-list">
			<VolunteerPanel :requestList="accepted">
				已接收出行
			</VolunteerPanel>
		
			<template v-if="serviceStatus === 1">
				<VolunteerPanel @checkRequest="handleCheckRequest" :requestList="requesting">
					请求出行
				</VolunteerPanel>
				
				<VolunteerPanel @deleteRequest="handleDeleteRequest" :requestList="expired">
					出行请求无效
				</VolunteerPanel>
			</template>
			
		</view>
	
		<RouteRequest  ref="routeInfo" @applyRequest="handleApplyRequest"></RouteRequest>
	</view>
</template>

<script>
	import RouteRequest from "./RouteRequest.vue"
	import VolunteerPanel from "./VolunteerPanel.vue"
	import VolunteerStatus from "./VolunteerStatus.vue"
	import * as VolunteerApi from "@/api/assist/volunteer.js"
	import * as Service from "@/core/constant/service.js"
	import {SERVICE_START,SERVICE_STOP} from "@/core/constant/volunteer.js"
	import {FORTHWITH_ASSIST_VOLUNTEER_REQUEST,NOTICE} from "@/core/constant/WebSocketEvent.js"
	
	export default {
		name:"AssitVolunteer",
		components:{
			VolunteerPanel,
			VolunteerStatus,
			RouteRequest
		},
		data() {
			return {
				requesting:[], // status = 1
				accepted:[], // status = 3
				expired:[] ,// status = 2 or 4 or 5,
				serviceStatus:SERVICE_STOP,
				requestCount:0,
				requestTimeGap:15, // 1min刷新一次列表
				Service,
			}
		},
		methods: {
			/**
			 * 查看出行详情
			 * @param {Object} item
			 */
			async handleCheckRequest(item){
				const route = await this.getRequestRouteInfo(item)
				this.$refs.routeInfo.open(route,item.travelApplyId)
			},
			async getRequestRouteInfo(item){
				const params = {
					routeId:item.routeId,
					travelId:item.travelId
				}
				return await VolunteerApi.requestInfo(params)
			},
			
			/**
			 * 监听志愿服务状态变化
			 * @param {Object} status
			 */
			async handleChangeStatus(serviceInfo){
				this.serviceStatus = serviceInfo.status
				if(this.serviceStatus === SERVICE_START){
					await this.refreshRequests()
				}else{
					console.log("关闭服务")
				}
			},
			async deleteRequest(travelApplyId){
				await VolunteerApi.deleteRequest(travelApplyId)
			},
			
			/**
			 * 初始化数据
			 */
			async refreshRequests(){
				await this.getRequestCount()
				await this.getConditionalRequests()
			},
			async getRequestCount(){
				const {count} = await VolunteerApi.serviceCount()
				this.requestCount = count
			},
			async getConditionalRequests(){
				this.requesting = []
				this.accepted = []
				this.expired = []
				const requests = await VolunteerApi.serviceList()
				
				for(const req of requests){
					if(req.status === Service.SERVICE_REQUESTING){ 
						this.requesting.push(req)
					}else if(req.status === Service.SERVICE_ACCEPTED){
						this.accepted.push(req)
					}else{
						this.expired.push(req)
					}
				}
				
			},
			
			/**
			 * 删除请求
			 * @param {Object} item
			 */
			async handleDeleteRequest(item){
				try{
					await this.deleteRequest(item.travelApplyId)
					await this.refreshRequests()	
				}catch(err){
					this.$error("出现了一些小问题~")
				}
			},
			/**
			 * 请求被接受/拒绝了，刷新出行列表的样式
			 */
			handleApplyRequest(params){
				const index = this.requesting.findIndex(req => req.travelApplyId === params.travelApplyId)
				if(params.applyState === 1){
					this.accpeted.push(this.requesting[index])
				}else{
					this.expired.push(this.requesting[index])
				}
				this.requesting.splice(index,1)
			},
			
			async deleteRequest(travelApplyId){
				await VolunteerApi.deleteRequest(travelApplyId)
			},
		},
		
		async created(){
			uni.$on(FORTHWITH_ASSIST_VOLUNTEER_REQUEST,async () => {
				if(this.serviceStatus === SERVICE_STOP){
					return
				}
				await this.refreshRequests()
			})
			
			uni.$on(NOTICE,async () => {
				if(this.serviceStatus === SERVICE_STOP){
					return
				}
				await this.refreshRequests()
			})
		},
		
	}
</script>

<style lang="scss">
	$color-black:#212529;
	$color-orange-light:#ff8d1a;

	.volunteer{
		width:100%;
		gap:24px;
	}
	

</style>
